<template>
	<view class="drag optional pr">
		
		<!-- 头部导航 -->
		<view class="titleView">
			
			<view class="top_head pr">
				<!-- #ifdef APP -->
				<view class="state_top"></view>
				<!-- #endif -->
				<view class="head_top" :style="'height:'+topBarTop()+'px;'"></view>
			</view>
			<view class="nav-head">
				<view @click.stop="sideListOpen()">
					<image src="/static/hk_more.png" class="head-image"></image>
				</view>
				
				<view class="title-view">
					<image :src="storeItem.logoFilePath" class="title-image"></image>
					<text>{{storeItem.name}}</text>
				</view>
			</view>
			
			
		</view>
		
		<!-- :style="{opacity:op}" v-if="op > 0.6 && itemData.params.topUp == 1" -->
		
		<view class="fixed-top" >
			
			<!-- 搜索框 -->
			<view class="navigation d-s-c">
				
				<view class="phone-top-search-box d-s-c" 
					@click.stop="openSearch(op > 1)">
					<text class="icon iconfont icon-sousuo1"
						:style="{color:itemData.style.searchColor|| '#999'}"></text>{{itemData.params.searchText}}
				</view>
				
				<image @click.stop="openCategory()" class="logo-img" src="/static/home_category.png" mode="aspectFill"></image>
			</view>
		</view>
		
		<view class="top_head pr">
			<!-- #ifdef APP -->
			<view class="state_top"></view>
			<!-- #endif -->
			<view class="head_top" :style="'height:'+topBarTop()+'px;'"></view>
		</view>
		<view class="bg-topMerge">
			<image :class="{active:current == index}" v-for="(item,index) in itemData.images" :key="index" class="bgimg"
				:src="item.imgUrl || ''"></image>
		</view>
		<view class="bg-topMerge-color"
			:style="{backgroundImage:`linear-gradient(rgba(245, 245, 245, 0) 0%, rgba(245, 245, 245, 0) 50%,${ itemData.style.bgcolor_color1 || '#fff'} 100%)`}">
		</view>
		<view class="diy-TopMerge">
			<!-- 搜索框 -->
			<view class="navigation d-s-c" :class="{mb20:!itemData.params.showCategory}">
				
				<view class="phone-top-search-box d-s-c" 
					@click.stop="openSearch(true)">
					<text class="icon iconfont icon-sousuo1"
						:style="{color:itemData.style.searchColor|| '#999'}"></text>{{itemData.params.searchText}}
				</view>
				<image @click.stop="openCategory()" class="logo-img" src="/static/home_category.png" mode="aspectFill"></image>
			</view>
			<!-- 选项卡 -->
			<navBar v-if="itemData.params.showCategory" class="ww100" defaultColor="#fff" @currentIndex="setIndex"
				:marginRight="itemData.style.categoryPadding" :currentI="thisindex" :navList="itemData.data">
			</navBar>
			<!-- 轮播图 -->
			<swiper :previous-margin="itemData.params.type == 1?'0':'40rpx'"
				:next-margin="itemData.params.type == 1?'0':'40rpx'" class="swiper" :autoplay="false" :interval="5000"
				:duration="500" @change="changeSwiper">
				<swiper-item class="o-h" v-for="(item, index) in itemData.images" :key="index" @click="gotopaged(item)">
					<image lazy-load class="image"
						:class="`imageType${itemData.params.type}`+(current == index?' active':'')" mode="aspectFill"
						:style="{
							borderRadius:
								itemData.style.topRadio * 2 +
								'rpx ' +
								itemData.style.topRadio * 2 +
								'rpx ' +
								itemData.style.bottomRadio * 2 +
								'rpx ' +
								itemData.style.bottomRadio * 2 +
								'rpx'
						}" :src="item.imgUrl"></image>
				</swiper-item>

			</swiper>
		</view>
		<view class="dots center d-c-c"
			:class="{'d-s-c':itemData.style.btnShape =='left','d-c-c':itemData.style.btnShape =='center','d-e-c':itemData.style.btnShape =='right'}">
			<view :key="index" :class="current == index ? 'active ' + itemData.style.imgShape : itemData.style.imgShape"
				v-for="(banner, index) in itemData.images"
				:style="current == index ? 'background:' + itemData.style.btnColor : 'background:' + itemData.style.btnOpColor">
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				thisindex: 0,
				current: 0,
				category_id: '',
				op: 0
			};
		},
		props: ['itemData', 'diytop', 'storeItem'],
		watch: {
			diytop(n, o) {
				if (n != o) {
					let op = (n * this._wW) / (85 * this._wW);
					this.op = op >= 1 ? 1 : op;
				}
			}
		},
		async created() {
			let SystemInfo = await this.getSystemInfo();
			this._wW = SystemInfo.windowWidth / 750;
			if (this.itemData.data && this.itemData.data[0].text !== '首页') {
				this.itemData.data = [{
					text: '首页'
				}, ...this.itemData.data];
			}
		},
		methods: {
			gotopaged(e) {
				let url = e.linkUrl;
				this.gotoPage(url);
			},
			openSearch(e) {
				this.$emit('parentFunc', {
					name: 'openSearch',
					value: e
				});
			},
			openCategory(e){
				
				this.$emit('parentFunc', {
					name: 'openCategory',
					value: e
				});
			},
			
			sideListOpen(e){
				this.$emit('parentFunc', {
					name: 'sideListOpen',
					value: e
				});
			},
			
			// 获取设备信息
			getSystemInfo() {
				return new Promise((req, rej) => {
					uni.getSystemInfo({
						success: function(res) {
							req(res);
						},
					});
				});
			},
			setIndex(e) {
				this.thisindex = e;
				console.log(this.thisindex, 'this.thisindex')
				console.log(this.itemData.data[e], 'this.itemData.data[e]')
				this.category_id = this.itemData.data[e] && this.itemData.data[e].category_id || '';
				this.$emit('setIndex', this.thisindex, this.category_id);
			},
			changeSwiper(e) {
				this.current = e.detail.current;
			},
		}
	};
</script>

<style lang="scss" scoped>
	.optional {
		padding-bottom: 22rpx;
	}
	
	
	.nav-head {
		height: 88rpx;
		display: flex;
		
		.head-image {
			width: 40rpx;
			height: 40rpx;
			margin-left: 28rpx;
			margin-top: 24rpx;
		}
		
		.title-view {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			width: 80%;
			
			.title-image {
				width: 40rpx;
				height: 40rpx;
			}
		}
	}
	
	.bg-topMerge-color {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		overflow: hidden;
		z-index: 1;
	}

	.bg-topMerge {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		z-index: 0;
		filter: blur(0);
		overflow: hidden;

		.bgimg {
			width: 100%;
			height: 100%;
			filter: blur(30rpx);
			transform: scale(1.5);
			transition: all 0.5s ease;
			display: none;
		}

		.active {
			animation: changeBaner 1s forwards;
			display: block;
		}

		@keyframes changeBaner {
			0% {
				opacity: 0.6;
			}

			20% {
				opacity: 0.8;
			}

			75% {
				opacity: 1;
			}
		}
	}

	.diy-TopMerge {
		position: relative;
		z-index: 1;
	}

	.navigation {
		padding: 18rpx 24rpx 0 24rpx;
		/* #ifdef MP */
		padding-top: 0;

		/* #endif */
		.logo-img {
			display: block;
			width: 40rpx;
			height: 40rpx;
			margin-left: 30rpx;
			// flex-shrink: 0;
		}

		.phone-top-search-box {
			// margin-left: 30rpx;
			flex: 1;
			height: 60rpx;
			border-radius: 60rpx;
			font-size: 26rpx;
			line-height: 30rpx;
			color: #999999;
			padding: 0 20rpx;
			background-color: #fff;

			.icon.icon-sousuo1 {
				font-size: 26rpx;
			}
		}
	}

	.swiper {
		height: 318rpx;

		.image {
			margin: 0 auto;
			display: block;
			transform: scale(1);
		}

		.imageType1.image {
			width: 710rpx;
			height: 318rpx;

		}

		.imageType2.image {
			width: 670rpx;
			height: 318rpx;
			transform: scale(0.94);
			transition: transform 0.5s ease;
		}

		.imageType2.image.active {
			width: 670rpx;
			height: 318rpx;
			transform: scale(1);
		}
	}

	.optional .dots {
		padding: 0 40rpx;
		box-sizing: border-box;
		position: absolute;
		left: 0;
		right: 0;
		margin: 0 auto;
		bottom: 40rpx;
		width: 100%;
		z-index: 1;
	}

	.optional .round .dots {
		position: absolute;
		left: 0;
		right: 0;
		margin: 0 auto;
		bottom: 40rpx;
	}

	.optional .dots .square,
	.optional .dots .round,
	.optional .dots .rectangle {
		bottom: 40rpx;
		left: 0;
		right: 0;
		margin: auto;
	}

	.optional .dots .square {
		width: 14rpx;
		height: 14rpx;
		margin: 0 4rpx;
		background: #ebedf0;
		opacity: 0.3;
	}

	.optional .dots .round {
		width: 22rpx;
		height: 22rpx;
		margin: 0 4rpx;
		background: #ebedf0;
		opacity: 0.3;
		border-radius: 50%;
	}

	.optional .dots .rectangle {
		width: 40rpx;
		height: 6rpx;
		margin: 0 4rpx;
		background: #ebedf0;
		opacity: 0.3;
		border-radius: 4rpx;
	}

	.optional .dots .active {
		opacity: 1;
	}

	.fixed-top {
		// background-color: #fff;
		// position: fixed;
		// padding-bottom: 20rpx;
		// top: 0;
		// left: 0;
		// z-index: 100;
		// width: 100%;
		    margin-top: 44rpx;
			
		.phone-top-search-box {
			margin-left: 30rpx;
			flex: 1;
			height: 60rpx;
			border-radius: 60rpx;
			font-size: 26rpx;
			line-height: 30rpx;
			color: #999999;
			padding: 0 20rpx;
			background: #F5F5F5;

			.icon.icon-sousuo1 {
				font-size: 26rpx;
			}
		}
	}
	
	.titleView{
		background-color: #fff;
		position: fixed;
		// padding-bottom: 20rpx;
		top: 0;
		left: 0;
		z-index: 100;
		width: 100%;
		
	}
	
</style>